<template>
  <div class="calendar_box">
    <el-row :gutter="20">
      <el-col :span="18">
        <FullCalendar class="fullCalendar" ref="fullCalendar" :options="calendarOptions"/>
      </el-col>
      <el-col :span="6" class="detail_box">
        <el-alert style="margin-top: 25px" title="我的排班信息" type="success" :closable="false"></el-alert>
        <el-form :model="info" label-width="100px">
          <el-form-item label=""></el-form-item>
          <el-form-item label="排班标题：">{{ info.title }}</el-form-item>
          <el-form-item label="排班员工：">{{ info.staffName }}</el-form-item>
          <el-form-item label="排班时间：">{{ info.dutyTime }}</el-form-item>
          <el-form-item label="结束时间：">{{ info.end }}</el-form-item>
          <el-form-item label="联系电话：">{{ info.phone }}</el-form-item>
          <el-form-item label="工作邮箱：">{{ info.mail }}</el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
export default {
  name: "Duty",
  components: {FullCalendar},// make the <FullCalendar> tag available
  data() {
    return {
      calendarOptions: {
        displayEventTime: true, // 是否显示时间
        //   timeGridPlugin  可显示每日时间段
        handleWindowResize: true, //随浏览器窗口变化
        height: 600,
        plugins: [dayGridPlugin, interactionPlugin],
        headerToolbar: {
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth,dayGridWeek,dayGrid",
        },
        buttonText: {
          // 设置按钮
          today: "今天",
          month: "月",
          week: "周",
          dayGrid: "天",
          color: '#dfdfdfd'
        },
        // allDaySlot: false,
        editable: true,
        selectable: true,
        navLinks: true,
        // displayEventEnd: true,//所有视图显示结束时间
        initialView: "dayGridMonth", // 设置默认显示月，可选周、日
        eventClick: this.handleEventClick,
        // eventsSet: this.handleEvents,
        // select: this.handleDateSelect,
        // 设置日程
        events: [],
        eventColor: "#02f8d0", // 修改日程背景色
        locale: "zh-cn", // 设置语言
        weekNumberCalculation: "ISO", // 周数
        customButtons: {}
      },
      param: {
        staffId: '',
        page: 1,
        size: 22,
      },
      info: {},
      staffList: [],
      staffInfo: {},
      userInfo: [],
    }
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
    this.calendarApi = this.$refs.fullCalendar.getApi();
    this.getDuty();
  },
  methods:{
    getDuty() {
      this.param.staffId = this.userInfo.id
      this.$axios.get('/api/com/findDuty',{params : this.param}).then(res => {
        if (res.data.status === 1) {
          console.log(res.data.data.list);
          this.calendarOptions.events = res.data.data.list
        }
      })
    },
    getInfo(item) {
      this.staffInfo = item
    },
    //点击排班事件
    handleEventClick(calEvent) {
      this.isShowBtn = true;
      this.info = {}
      let data = calEvent.event;
      // console.log(data)
      this.info.id = data.id
      this.info.dutyTime = data._def.extendedProps.dutyTime
      this.info.end = calEvent.event.endStr.split('T').join(' ').substring(0,19)
      this.info.title = data.title
      this.info.staffName = data._def.extendedProps.staffName
      this.info.phone = data._def.extendedProps.phone
      this.info.mail = data._def.extendedProps.mail
      // console.log(this.dateToString(calEvent.event.start))
    },
  }

}
</script>

<style scoped>

.calendar_box > > > .el-dialog {
  width: 450px;
}

.calendar_box > > > .el-date-editor.el-input {
  width: 330px;
}

.el-select {
  width: 100%;
}

.detail_box >>> .el-form {
  border: 1px solid #ddd;
}

.detail_box >>> .el-form-item__content {
  text-align: left;
  color: #333;
}
</style>
